<template>
  <div id="components-form-demo-advanced-search">
    <a-form class="ant-advanced-search-form" :form="form" @submit="handleSaleSubmit">
      <div class="client-header">
        <div class="client-header-title">新建工单</div>
      </div>
      <div class="sale-content">
        <a-row :gutter="24">
          <a-col :span="8">
            <a-form-item label="所属片区">
              <!--<a-select show-search option-filter-prop="children"
                        v-decorator="['ownDistrict',
          { initialValue: '',
            rules: [{ required: true, message: '请选择所属片区' }] },
        ]"
                        placeholder="请选择所属片区"
              >
                <a-select-option v-for="item in districtArray" :key="item" :value="item">
                  {{item}}
                </a-select-option>
              </a-select>-->
              <div class="belonged-district">{{ belongedDistrict }}</div>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="任务类别">
              <a-select show-search option-filter-prop="children"
                        v-decorator="['taskType',
          { initialValue: '',
            rules: [{ required: true, message: '请选择任务类别' }] },
        ]"
                        placeholder="请选择任务类别"
              >
                <a-select-option v-for="item in taskTypeArray" :key="item" :value="item">
                  {{item}}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="保修状态">
              <a-select show-search option-filter-prop="children"
                        v-decorator="['guaranteeState',
          { initialValue: '',
            rules: [{ required: true, message: '请选择保修状态' }] },
        ]"
                        placeholder="请选择保修状态"
              >
                <a-select-option v-for="item in guaranteeStateArray" :key="item" :value="item">
                  {{item}}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="8">
            <a-form-item label="客户类型">
              <a-select show-search option-filter-prop="children"
                        v-decorator="['customerType',
          { initialValue: '',
            rules: [{ required: true, message: '请选择客户类型' }] },
        ]"
                        placeholder="请选择客户类型"
              >
                <a-select-option v-for="item in clientTypeArray" :key="item" :value="item">
                  {{item}}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="故障件使用时间">
              <a-select show-search option-filter-prop="children"
                        v-decorator="['faultyPartsTime',
          { initialValue: '',
            /*rules: [{ required: true, message: '请选择故障使用时间' }]*/ },
        ]"
                        placeholder="请选择故障使用时间"
              >
                <a-select-option v-for="item in failurePartsArray" :key="item" :value="item">
                  {{item}}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="重大问题" class="significant-problem">
              <span>
                <a-radio-group v-model="isViIssue" button-style="solid" @change="onRadioChange">
                  <a-radio-button value="true">是</a-radio-button>
                  <a-radio-button value="false">否</a-radio-button>
                </a-radio-group>
              </span>
              <a-select v-if="radioShow" class="input-disable-issue"
                        show-search option-filter-prop="children"
                        v-decorator="['viIssueInfo',
          { initialValue: '',
            rules: [{ required: true, message: '请选择重大问题' }] },
        ]"
                        placeholder="请选择重大问题" >
                <a-select-option v-for="item in significantArray" :key="item" :value="item">
                  {{item}}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="8" style="display: block">
            <a-form-item label="数控系统编号">
              <a-input v-decorator="['ncNumber',
                  {
                    initialValue: '',
                    rules: [{ required: true, pattern: /\S/, message: '请输入数控系统编号' }]
                    },
                ]"
                       placeholder="请输入数控系统编号" autoComplete="off" />
            </a-form-item>
          </a-col>
          <a-col :span="8" style="display: block">
            <a-form-item label="数控系统版本">
              <a-input v-decorator="['ncVersionType',
                  {
                    initialValue: '' },
                ]"
                       placeholder="请输入数控系统版本" autoComplete="off" />
            </a-form-item>
          </a-col>
          <a-col :span="8" style="display: block">
            <a-form-item label="数控系统SN">
              <a-input v-decorator="['macSn',
                  {
                    initialValue: '',
                    rules: [{ required: true, pattern: /^[a-zA-Z0-9]{1,20}$/, message: '系统SN仅限数字和字母' }]
                    },
                ]"
                       placeholder="请输入系统SN(仅限数字和字母)" autoComplete="off" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="8" style="display: block">
            <a-form-item label="信息来源">
              <a-input v-decorator="['informationSource',
                  {
                    initialValue: '',
                    rules: [{ required: true, pattern: /\S/, message: '请输入信息来源' }]
                    },
                ]"
                       placeholder="请输入信息来源" autoComplete="off" />
            </a-form-item>
          </a-col>
          <a-col :span="8" style="display: block">
            <a-form-item label="故障发生时间">
              <a-date-picker class="client-purchase-time"
                             :disabled-date="disabledDate"
                             v-decorator="['impedimentStartTime',
                  {
                    initialValue: doHandleDate,
                    rules: [{ required: true, pattern: /\S/, message: '请输入设备购买时间' }]
                    },
                ]"
                             placeholder="请输入设备购买时间" autoComplete="off" />
            </a-form-item>
          </a-col>
          <a-col :span="8" style="display: block">
            <a-form-item label="故障件型号">
              <a-input v-decorator="['faultyPartsType',
                  { initialValue: '' },
                ]"
                       placeholder="请输入故障件型号" autoComplete="off" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="8" style="display: block">
            <a-form-item label="故障件编号">
              <a-input v-decorator="['faultyPartsNumber',
                  { initialValue: '' },
                ]"
                       placeholder="请输入故障件编号" autoComplete="off" />
            </a-form-item>
          </a-col>
          <a-col :span="8" style="display: block">
            <a-form-item label="处理时间(天)">
              <a-input v-decorator="['resolveTime',
                  {
                    initialValue: '',
                    rules: [{ required: true, pattern: /\S/, message: '请输入处理时间' }]
                    },
                ]"
                       placeholder="请输入处理时间" autoComplete="off" />
            </a-form-item>
          </a-col>
          <a-col :span="8" style="display: block">
            <a-form-item label="加班时间(小时)">
              <a-input v-decorator="['extraTime',
                  {
                    initialValue: '',
                    rules: [{ required: true, pattern: /\S/, message: '请输入加班时间' }]
                    },
                ]"
                       placeholder="请输入加班时间" autoComplete="off" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="8" style="display: block">
            <a-form-item label="处理设备数量">
              <a-input v-decorator="['resolveNcNumber',
                  { initialValue: '' },
                ]"
                       placeholder="请输入处理设备数量" autoComplete="off" />
            </a-form-item>
          </a-col>
          <a-col :span="8" style="display: block">
            <a-form-item label="现场工程师">
              <a-input v-decorator="['fieldEngineer',
                  {
                    initialValue: '',
                    rules: [{ required: true, pattern: /\S/, message: '请输入现场工程师' }]
                    },
                ]"
                       placeholder="请输入现场工程师" autoComplete="off" />
            </a-form-item>
          </a-col>
          <a-col :span="8" style="display: block">
            <a-form-item label="其他描述">
              <a-input v-decorator="['otherDescription',
                  { initialValue: '' },
                ]"
                       placeholder="请输入其他描述" autoComplete="off" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :span="24" style="display: block">
          <a-col :span="8" style="display: block">
            <a-form-item label="解决方案">
              <a-input v-decorator="['solution',
                  { initialValue: '' },
                ]"
                       placeholder="请输入解决方案"  autoComplete="off" />
            </a-form-item>
          </a-col>
          <a-col :span="8" style="display: block">
            <a-form-item label="需求建议">
              <a-input v-decorator="['demandSuggestion',
                  { initialValue: '' },
                ]"
                       placeholder="请输入需求建议"  autoComplete="off" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :span="24" style="display: block">
          <a-form-item label="设备类型" class="row-multiply">
            <a-select show-search option-filter-prop="children"
                      v-decorator="['equipmentType',
          { rules: [{ required: true, message: '请选择设备类型' }] },
        ]"
                      mode="multiple"
                      placeholder="请选择设备类型"
            >
              <a-select-option v-for="item in deviceTypeArray" :key="item" :value="item">
                {{item}}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-row>
        <a-row :span="24" style="display: block">
          <a-form-item label="故障类型" class="row-multiply">
            <a-select show-search option-filter-prop="children" mode="multiple"
                      v-decorator="['impedimentType',
          { rules: [{ required: true, message: '请选择故障类型' }] },
        ]"
                      placeholder="请选择故障类型"
            >
              <a-select-option v-for="item in impedimentTypeArray" :key="item" :value="item">
                {{item}}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-row>
        <a-row :span="24" style="display: block">
          <a-form-item label="故障分类" class="row-multiply">
            <a-select show-search option-filter-prop="children" mode="multiple"
                      v-decorator="['faultClass',
          { rules: [{ required: true, message: '请选择故障分类' }] },
        ]"
                      placeholder="请选择故障分类"
            >
              <a-select-option v-for="item in faultClassArray" :key="item" :value="item">
                {{item}}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-row>
        <a-row :span="24" style="display: block">
          <a-form-item label="故障原因" class="row-multiply">
            <a-select show-search option-filter-prop="children" mode="multiple"
                      v-decorator="['impedimentReason',
          { rules: [{ required: true, message: '请选择故障原因' }] },
        ]"
                      placeholder="请选择故障原因"
            >
              <a-select-option v-for="item in impedimentReasonArray" :key="item" :value="item">
                {{item}}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-row>
        <a-row :span="24" style="display: block">
          <a-form-item label="故障处理结果" class="row-multiply">
            <a-select show-search option-filter-prop="children" mode="multiple"
                      v-decorator="['impedimentResolveResult',
          { rules: [{ required: true, message: '请选择故障处理结果' }] },
        ]"
                      placeholder="请选择故障处理结果"
            >
              <a-select-option v-for="item in impedimentResolveResultArray" :key="item" :value="item">
                {{item}}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-row>
        <a-row :span="24" style="display: block">
          <a-col :span="8" style="display: block">
            <a-form-item label="重大专项课题名称">
              <a-input v-decorator="['topicName',
                  { initialValue: '' },
                ]"
                       placeholder="请输入重大专项课题名称" autoComplete="off" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :span="24" style="display: block">
          <a-col :span="8" style="display: block">
            <a-form-item label="重大专项课题编号">
              <a-input v-decorator="['topicNumber',
                  { initialValue: '' },
                ]"
                       placeholder="请输入重大专项课题编号" autoComplete="off" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :span="24" style="display: block">
          <a-form-item label="重大专项应用领域" class="row-multiply">
            <a-select show-search option-filter-prop="children" mode="multiple"
                      v-decorator="['applicationRange',
        ]"
                      placeholder="请选择重大专项领域"
            >
              <a-select-option v-for="item in applicationRangeArray" :key="item" :value="item">
                {{item}}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-row>
        <a-row :span="24" style="display: block">
          <a-form-item label="现场详细记录" class="row-multiply">
            <a-textarea autosize
                        v-decorator="['impedimentDescri',
          { initialValue: '',
            rules: [{ required: true, pattern: /\S/, message: '请描述详细记录' }] },
        ]"
                        placeholder="请描述详细记录"  autoComplete="off" />
          </a-form-item>
        </a-row>
        <a-row :span="24" style="display: block">
          <a-col :span="2" style="display: block"><div class="sale-pic-title"><span class="pic-must">✻</span> 图片:</div></a-col>
          <a-col :span="15" style="display: block">
            <div class="sale-pic-container">
              <upload-image @changeFileList="changeFileList"></upload-image>
            </div>
          </a-col>
        </a-row>
        <a-row :span="24">
          <a-col :span="24" :style="{ textAlign: 'center' }">
            <a-button class="client-update" :disabled="isDisabled" type="primary" html-type="submit">
              提交</a-button>
          </a-col>
        </a-row>
      </div>
    </a-form>
  </div>
</template>
<script>
  import UploadImage from './components/Image'
  import api from '@/server/userConfig';
  import GLOBAL from "@/api/global_variable"
  import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
  import moment from 'moment';
  import 'moment/locale/zh-cn';
  export default {
    name: "SaleClientDetail",
    components: {
      UploadImage
    },
    data () {
      return {
        expand: true,
        formItemLayout: {
          labelCol: { span: 1 },
          wrapperCol: { span: 14 },
        },
        picturesId: '',
        orderNumber: '',
        isViIssue: 'false',
        viIssueInfo: '',
        radioShow: false,
        showRoleBtn: true,
        userName: '',
        isDisabled: false,
        form: this.$form.createForm(this, { name: 'advanced_search' }),
        provinceData: ["北京市","天津市","上海市","重庆市","河北省","山西省","内蒙古","辽宁省","吉林省","黑龙江省","江苏省","浙江省","安徽省",
          "福建省","江西省","山东省","河南省","湖北省","湖南省","广东省","广西","海南省","四川省","贵州省","云南省","西藏","陕西省","甘肃省",
          "青海省","宁夏","新疆","香港","澳门","台湾省", "研究院"],
        districtArray: ['华中片区', '华北片区', '华东片区', '东北片区', '西北片区', '深圳分公司', '宁波分公司',
          '重庆分公司', '沈阳分公司', '云南分公司', '泉州分公司'],
        taskTypeArray: ['设备调试', '故障报修', '培训申请', '大赛技术支持', '技术咨询', '其他', '机床翻新', '驻厂服务'],
        guaranteeStateArray: ['保内免费', '保内收费', '保外免费', '保外收费'],
        clientTypeArray: ['工业-机床厂', '工业-最终用户', '教育行业'],
        failurePartsArray: ['开箱损坏', '厂内调试', '现场交机','1个月', '3个月', '6个月', '12个月', '24个月','保外', '无故障件'],
        significantArray: ['掉刀', '跑偏', '撞机', '铣深', '扎刀'],
        deviceTypeArray: ['加工中心', '铣床', '钻攻中心', '车床', '机器人','木工机', '五轴', '磨床', '智能产线', '专机', '理实一体化'],
        impedimentTypeArray: ['系统硬件', '系统软件', '驱动器', '主轴电机', '移动轴电机','线缆故障', '开关电源', 'IO故障', 'UPS', '多摩川电机',
          '刀库电机', '刀库','电阻问题', '机械故障', '其他'],
        faultClassArray: ['系统硬件','软件bug', '驱动器', '主轴电机', '移动轴电机','线缆故障','IO故障','UPS故障','开关电源','多摩川电机','刀库电机','刀库','电阻问题',
          '机械故障', 'A1主电路欠压', 'A2主电路过压', 'A3IPM模块故障','A4制动故障', 'A5','A6电机过热', 'A7编码器数据信号错误', 'A8编码器类型错误',
          'A9系统软件过热','A10过电流','A11电机超速','A12跟踪误差过大','A13电机长时间过载','A14控制参数读取错误','A15指令超频','A16控制板硬件故障','A17驱动单元过热',
          'A18','A19AD转换故障', 'A20反向超程警告','A21正向超程警告','A22系统自识别调整错误', 'A23NCUC数据帧校验错误', 'A24NCUC数据丢包错误', 'A25通讯链路断开',
          'A26电机编码器信号通讯故障', 'A27', 'A28','A29驱动及电机型号代码匹配错误', 'A30电机相序错误', 'A31电机定向错误','A32Z脉冲没有找到', 'A33速度偏差过大',
          'A34多摩川编码器电池警告', 'A35多圈位置出错', 'A36多摩川编码器计数溢出', 'A37全闭环编码器计数错误','A38适配多摩川编码电机零位不正常警告信息','堵转、负载大',
          'A39适配多摩川编码电机非华大电机警告','A40配多摩川编码电机非华大电机型号代码错误','A41非绝对式编码器初始相位错误','异响','短路','电机抖','无法上使能','超速',
          '跑偏','无动作','速度不正常','风扇问题','驱动灯','参数问题','无法上电','端口问题','烧坏','爆炸','进水','跳闸','单向运行','外壳破损','按键问题','断丝锥',
          '尺寸问题','5V电源低','定向问题','总线问题','电机抱闸','漏电','对地短路','外部问题','编码器问题','过冲','飞车','IPC','CF卡','急停','手摇','开关机、启停键',
          '倍率开关','装配问题','USB问题','进不了系统开机问题','轴误差大','外部接口、盖板问题','卡扣','面板灯问题','面板破损','屏幕破裂','屏幕显示问题','黑白花蓝屏','死机',
          '自动重启','轴移动问题','注册问题','软件写入异常','轴复位异常','输入输出问题','刀补问题','系统短路烧','系统盘坏','丝印、表面字体','坐标不保存','联网问题',
          'DOS问题','主板坏','轴口坏','机械手不在原位','动力线','编码线','指令线','总线','机械问题','信号线','其他描述','无故障','相序错报警','断电数据丢失','位置丢失',
          '关键参数丢失','零点跑','反馈位置脉冲出错'],
        impedimentReasonArray: ['硬件故障', '软件缺陷', '调试不当', '使用不当', '工艺问题', '其他'],
        impedimentResolveResultArray: ['更换配件', '修改参数', '软件升级', '维修机械', '改进工艺', '其他'],
        applicationRangeArray: ['航空领域', '航天领域', '船舶领域', '汽车领域', '兵器领域', '电子信息', '机床制造', '核工业'],
        belongedDistrict: ''
      };
    },
    computed: {
      count () {
        return this.expand ? 11 : 7;
      },
      doHandleDate: function () {
        const myDate = new Date();
        const tYear = myDate.getFullYear();
        const tMonth = myDate.getMonth();
        const tDay = myDate.getDate();
        let m = tMonth + 1;
        if (m.toString().length === 1) {
          m = "0" + m;
        }
        return moment(tYear +'-'+ m + '-' + tDay);
      }
    },
    mounted () {
      const { orderNumber } = this.$route.params;
      const phone = localStorage.getItem('phone');
      this.userName = phone;
      this.orderNumber = orderNumber;
      this.belongedDistrict = localStorage.getItem('belongedDistrict');
    },
    methods: {
      disabledDate (current) {
        // Can not select days before today and today
        return current && current > moment().endOf('day');
      },
      // 获取子组件传递过来的图片;
      handleChangePic (fileList) {
        this.clientFileList = fileList;
        let picturesId = '';
        let pictureIdArr = [];
        if (fileList.length === 0) {
          picturesId = '';
        } else {
          for (let i = 0; i < fileList.length; i++) {
            pictureIdArr.push(fileList[i].id);
            picturesId = pictureIdArr.join(',');
          }
        }
        this.picturesId = picturesId;
      },
      //点击切换是否重大问题;
      onRadioChange (e) {
        const radioValue = e.target.value;
        if (radioValue === "false") {
          // 非重大问题;
          this.radioShow = false;
          this.isViIssue = 'false';
        }else {
          this.radioShow = true;
          this.isViIssue = 'true';
        }
      },
      // 子组件传递过来的值;
      changeFileList (fileList) {
        let picturesId = '';
        let pictureIdArr = [];
        if (fileList.length === 0) {
          picturesId = '';
        } else {
          for (let i = 0; i < fileList.length; i++) {
            pictureIdArr.push(fileList[i].id);
            picturesId = pictureIdArr.join(',');
          }
        }
        this.picturesId = picturesId;
      },
      // 点击提交按钮;
      handleSaleSubmit (e) {
        e.preventDefault();
        this.form.validateFields((error, values) => {
          if (error) { return }
          console.log(values);
          let afterSaleData = {};
          afterSaleData.username = this.userName;
          afterSaleData.repairOrderNumber = this.orderNumber;
          afterSaleData.ownDistrict = values.ownDistrict;
          afterSaleData.customerType = values.customerType;
          afterSaleData.informationSource = values.informationSource;
          afterSaleData.taskType = values.taskType;
          afterSaleData.ncNumber = values.ncNumber;
          afterSaleData.macSn = values.macSn;
          afterSaleData.ncVersionType = values.ncVersionType;
          afterSaleData.impedimentStartTime = values['impedimentStartTime'].format('YYYY-MM-DD');
          afterSaleData.equipmentType = values.equipmentType.join(',');   // 设备类型(多选)
          afterSaleData.impedimentType = values.impedimentType.join(',');   // 故障类型(多选)
          afterSaleData.impedimentDescri = values.impedimentDescri; //(故障详细描述)
          afterSaleData.guaranteeState = values.guaranteeState;
          afterSaleData.faultyPartsType = values.faultyPartsType;
          afterSaleData.faultyPartsNumber = values.faultyPartsNumber;
          afterSaleData.faultyPartsTime = values.faultyPartsTime;
          afterSaleData.fieldEngineer = values.fieldEngineer;
          afterSaleData.resolveTime = values.resolveTime;
          afterSaleData.extraTime = values.extraTime;
          afterSaleData.resolveNcNumber = values.resolveNcNumber;
          afterSaleData.isViIssue = this.isViIssue;
          afterSaleData.viIssueInfo = values.viIssueInfo || "";
          afterSaleData.remark = '';
          afterSaleData.pictureId = this.picturesId; //图片
          // 后来新增的字段;
          afterSaleData.faultClass = values.faultClass.join(','); //故障分类(多选);
          afterSaleData.impedimentReason = values.impedimentReason.join(','); //故障原因(多选);
          afterSaleData.impedimentResolveResult = values.impedimentResolveResult.join(',');  //故障处理结果(多选);
          afterSaleData.otherDescription = values.otherDescription;  //其他描述;
          afterSaleData.demandSuggestion = values.demandSuggestion;  //需求建议;
          afterSaleData.solution = values.solution;  //解决方案;
          afterSaleData.softIssue = '';  //软件问题;
          afterSaleData.topicName = values.topicName;  //课题名称;
          afterSaleData.topicNumber = values.topicNumber;  //课题编号;
          if (!values.applicationRange) {
            afterSaleData.applicationRange = '';
          } else {
            afterSaleData.applicationRange = values.applicationRange.join(',');  //应用领域(多选);
          }
          if (!afterSaleData.pictureId) {
            this.$message.error('请至少添加一张图片');
            return;
          }
          const jsonRepairNewData = JSON.stringify(afterSaleData);
          console.log(jsonRepairNewData);
          api.reqAddSaleBill(jsonRepairNewData).then((res) => {
            if (res.MsgCode === 0) {
              this.$Modal.success({
                title: '',
                content: '关联服务单成功!',
                okText: '确定',
                onOk: () => {
                  this.isDisabled = true;
                }
              });
            } else {
              this.$message.error('新建失败...');
            }
          })
        });
      },
      // 点击重置;
      handleReset () {
        this.form.resetFields();
      },
    },
  };
</script>
<style scoped="scoped">
  @import "./components/style.css";
</style>
